<template>
	<view style="background-color: #F3F3F3;height:100vh;overflow: auto;">
		<view style="background-color: #FFFFFF;padding:10px;">
			<view style="height:30px">
				<u-search placeholder="请输入您的地址,如小区/写字楼/学校等" v-model="keyword" @change="changeKeyword"
					:show-action="false"></u-search>
			</view>
		</view>
		<view>
			<view style="background-color: #F3F3F3;heigth:10px;"></view>
			<view v-for="item in addresses"
				style="background-color: #FFFFFF;margin:10px;padding:15px;border-radius: 5px;" @click="choose(item)">
				<view style="font-size:16px;font-weight: bold;">
					{{item.title}}
				</view>
				<view style="color:#909399;padding-top:10px;font-size:12px">
					{{item.address}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import QQMapWX from '../../utils/qqmap/qqmap-wx-jssdk.js'
	export default {
		data() {
			return {
				keyword: '',
				region: '',
				addresses: [],
				citys: [],
				show: false
			}
		},
		onLoad() {

		},
		onShow() {
			// 获取定位城市
			const that = this;
			uni.getLocation({
				type: 'wgs84',
				success(res) {
					const {
						latitude,
						longitude
					} = res;
					// 使用腾讯位置服务（或其他地图服务）逆地址解析获取城市信息
					uni.request({
						url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${latitude},${longitude}&key=3WFBZ-WAVRD-BCC4Z-P5CCU-ULA55-PKBT2`,
						success(response) {
							console.log(response)
							if (response.data && response.data.result) {
								const addressComponent = response.data.result.address_component;
								that.city = addressComponent.city;
							} else {
								uni.showToast({
									title: '获取位置信息失败',
									icon: 'none'
								});
							}
						},
						fail(error) {
							uni.showToast({
								title: '请求失败',
								icon: 'none'
							});
							console.error(error);
						}
					});
				},
				fail(error) {
					uni.showToast({
						title: '获取位置失败',
						icon: 'none'
					});
					console.error(error);
				}
			});
		},
		methods: {
			changeKeyword() {
				console.log(this.keyword)
				let keyword = this.keyword
				if (keyword != '') {
					let qqmapwx = new QQMapWX({
						key: '3WFBZ-WAVRD-BCC4Z-P5CCU-ULA55-PKBT2'
					})
					qqmapwx.getSuggestion({
						keyword: keyword,
						region: this.region,
						sig: 'rqUh1v8IxMSDmCKKGtJAa73Lggru2N4z',
						region_fix: 1,
						success: (res) => {
							console.log('date', res)
							this.addresses = res.data
						},
						fail: (err) => {
							console.log('error', err)
						},
						complte: (data) => {
							console.log(data)
						}
					})
				}
			},
			choose(address) {
				console.log(address)
				uni.setStorageSync('chooseAdd', address)
				uni.navigateBack()
			}
		}
	}
</script>

<style>
	.time {
		color: #909399;
		font-size: 13px;
	}

	.add {
		color: #18B566;
		font-weight: bold;
		font-size: 16px;
	}

	.dev {
		color: #909399;
		font-weight: bold;
		font-size: 16px;
	}

	.wrap {
		padding: 10px 0px
	}
</style>